<template>
	<view class="container">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="skip" @tap="skip">
			<u-icon name="arrow-right-double"></u-icon>
			跳过
		</view>
		<view class="column">
			<text>机构名称</text>
			<input type="text" placeholder="请输入机构名称" v-model="name" />
		</view>
		<view class="column">
			<text>联系方式</text>
			<input type="number" placeholder="请输入电话号码" v-model="contact" />
		</view>
		<view class="column">
			<text>负责人姓名</text>
			<input type="text" placeholder="请输入姓名" v-model="leaderName" />
		</view>
		<view class="column">
			<text>机构地址</text>
			<input type="text" placeholder="请输入机构地址" v-model="address" />
		</view>
		<view class="uUpload" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="uUpload">
			<u-icon v-if="!bannerUrl" name="photo" size="60"></u-icon>
			<text v-if="!bannerUrl" style="margin-top: 30rpx">点击上传负责人身份证正面</text>
			<view class="banner" v-if="bannerUrl"><ImageLoad :src="bannerUrl" borderRadius="10" /></view>
		</view>
		<view class="column">选择经营范围:</view>
		<view class="select" v-for="(column, index) in items" :key="index">
			<u-tag style="margin-bottom: 10px" :text="column.title" type="warning" />
			<view class="select-item">
				<u-checkbox-group>
					<u-checkbox v-model="item.checked" active-color="#FED46B" v-for="(item, itemIndex) in column.item" :key="itemIndex" :name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="select">
			<u-tag style="margin-bottom: 10px" text="自定义标签" type="warning" />
			<input type="text" placeholder="请输入标签" v-model="other" />
		</view>
		<view class="add" @tap="add" hover-class="touch" hover-start-time="0" hover-stay-time="300">提交</view>
		<u-popup v-model="addEnd" mode="bottom" border-radius="20" :closeable="true">
			<view class="footer">
				<text style="margin-top: 40rpx">恭喜你填写完信息了，请按下列步骤继续完成认证：</text>
				<text style="margin-right: auto">2.在公众号“绘本侠”对话框内发送“认证”两字，完成认证。</text>
				<official-account></official-account>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Vue from 'vue'
export default {
	data() {
		return {
			bannerUrl: '',
			name: '',
			address: '',
			contact: '',
			leaderName: '',
			other: '',
			items: [
				{
					title: '亲子活动',
					item: []
				},
				{
					title: '幼儿课程',
					item: []
				},
				{
					title: '家长课程',
					item: []
				},
				{
					title: '其他课程',
					item: []
				}
			],
			addEnd: false,
			isIos: this.config.isIos
		}
	},
	onLoad() {
		const items = [
			['手工', '阅读', '陶艺', '农耕体验', '烘焙', '插花', '运动', '游泳', '公益', '瑜伽', '绘画'],
			[
				'思维',
				'阅读',
				'识字',
				'国学',
				'拼音',
				'围棋',
				'幼儿英语',
				'魔方',
				'科学',
				'主持',
				'专注力',
				'记忆力',
				'情绪管理',
				'数独',
				'钢琴',
				'古筝',
				'笛子',
				'琵琶',
				'二胡',
				'吉他',
				'绘画',
				'诗词',
				'书法',
				'武术',
				'跆拳道',
				'篮球',
				'戏剧',
				'机器人',
				'游泳'
			],
			['育儿', '亲子关系', '亲子沟通', '心理培训'],
			['专家课程', '职业培训']
		]
		items.map((item, index) => {
			item.map(item => {
				this.items[index].item.push({
					name: item,
					checked: false
				})
			})
		})
	},
	methods: {
		uUpload: async function() {
			const data = await this.chooseImage()
			this.bannerUrl = data
		},
		skip: function() {
			this.$Router.pushTab({ name: 'topic' })
		},
		add: function() {
			if (!this.name) {
				this.$refs.uTips.show({
					title: '请输入机构名称',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			if (!this.contact) {
				this.$refs.uTips.show({
					title: '请输入电话号码',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			if (!this.leaderName) {
				this.$refs.uTips.show({
					title: '请输入姓名',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			if (!this.address) {
				this.$refs.uTips.show({
					title: '请输入机构地址',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			if (!this.bannerUrl) {
				this.$refs.uTips.show({
					title: '请上传身份证照片',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			const tags = []
			if (this.other) tags.push(this.other)
			this.items.map(column => {
				column.item.map(item => {
					if (item.checked) tags.push(item.name)
				})
			})
			const json = {
				deviceUuid: this.deviceUuid,
				type: 'merchant',
				name: this.name,
				address: this.address,
				contact: this.contact,
				leaderName: this.leaderName,
				leaderIdCardUrl: this.bannerUrl,
				tags
			}
			this.$post(this.api.applyAdd, json)
				.then(res => {
					if (res.error && res.error === 'invalidAddress') {
						this.$refs.uTips.show({
							title: '地址无法定位，请重新输入',
							type: 'warning',
							duration: '1000'
						})
						return
					}
					this.$refs.uTips.show({
						title: '保存成功',
						type: 'success',
						duration: '1000'
					})
					setTimeout(() => {
						if (this.isIos) {
							this.$refs.uTips.show({
								title: '请关注绘本侠公众号完成认证',
								type: 'warning',
								duration: '2000'
							})
							this.addEnd = true
						} else {
							this.wxPay()
						}
					}, 1200)
				})
				.catch(() => {
					this.$refs.uTips.show({
						title: '网络异常',
						type: 'warning',
						duration: '2000'
					})
				})
		},
		/**
		 *  微信支付
		 */
		wxPay: async function() {
			const [payData, payErr] = await this.awaitWarp(this.$post(this.api.prepay, { deviceUuid: this.deviceUuid }))
			if (payErr) {
				this.$refs.uTips.show({
					title: '网络异常',
					type: 'warning',
					duration: '2000'
				})
				return
			}
			wx.requestPayment({
				timeStamp: payData.timeStamp,
				nonceStr: payData.nonceStr,
				package: payData.package,
				signType: payData.signType,
				paySign: payData.paySign,
				success: () => {
					const afterPayJson = {
						deviceUuid: this.deviceUuid,
						payOrderId: payData.payOrderId,
						result: 'success'
					}
					this.$post(this.api.afterPay, afterPayJson)
					this.$refs.uTips.show({
						title: '认证成功',
						type: 'success',
						duration: '1000'
					})
					uni.login({
						success: res => {
							const json = {
								mpType: 'WEIXIN',
								code: res.code
							}
							this.$post(this.api.getDeviceUuid, json).then(data => {
								Vue.prototype.hasMerchant = data.hasMerchant
								Vue.prototype.merchant = data.merchant
								Vue.prototype.sessionKey = data.sessionKey
							})
						}
					})
					setTimeout(() => {
						this.$Router.pushTab({ name: 'topic' })
					}, 1200)
				},
				fail: err => {
					let result = err.errMsg.indexOf('cancel') > -1 ? 'cancel' : 'error'
					const afterPayJson = {
						deviceUuid: this.deviceUuid,
						payOrderId: payData.payOrderId,
						result: result,
						errorMessage: err.errMsg.substring(err.errMsg.lastIndexOf('requestPayment') + 15, err.errMsg.length)
					}
					this.$post(this.api.afterPay, afterPayJson)
					this.$refs.uTips.show({
						title: result === 'cancel' ? '取消支付' : '支付失败',
						type: 'warning',
						duration: '2000'
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	min-height 100vh
	background #FFFBF3
	display flex
	flex-direction column
	align-items center
	padding 50rpx
	position relative
	.skip
		font-size 35rpx
		position absolute
		right 0
		top 20rpx
		color #FF9C15
		display flex
		align-items center
		justify-content center
		width 200rpx
		height 70rpx
	.column
		width 650rpx
		height 100rpx
		border-bottom 2rpx solid #FAF6EE
		display flex
		justify-content space-between
		align-items center
		font-size 30rpx
	.select
		width 650rpx
		border-bottom 2rpx solid #FAF6EE
		display flex
		flex-direction column
		padding 20rpx 0
		.select-title
			font-size 25rpx
	.uUpload
		width 400rpx
		height 200rpx
		margin-left -250rpx
		background #FDF6EC
		margin-top 20rpx
		border-radius 10rpx
		display flex
		flex-direction column
		justify-content center
		align-items center
		color #FF9900
		transition all 0.3s
		border 1px solid #FAECD8
		.banner
			position relative
			width 100%
			height 100%
			overflow hidden
			transform translate3d(0, 0, 0)
	.add
		width 300rpx
		height 90rpx
		line-height 90rpx
		text-align center
		border-radius 50rpx
		background #fed46b
		color #fff
		font-size 40rpx
		margin 40rpx 0
		transition all 0.3s
	.footer
		width 100vw
		display flex
		flex-direction column
		align-items center
		justify-content center
		font-size 30rpx
		padding 30rpx
		text
			margin-bottom 20rpx
</style>
